<template>
  <div class="app">
    <div class="header">
      <van-search v-model="value" placeholder="商店/旅行" show-action @cancel="onCancel" />
      <van-tabs v-model:active="cityBarActive" color="orange">
        <template v-for="(value,key,index) in cityAll" :key="index">
          <van-tab :title="value.title" :name="key">
          </van-tab>
        </template>
      </van-tabs>
    </div>
    <div class="contaion">
      <template v-for="(value,key,index) in cityAll" :key="index">
        <city-map-list v-show="key == cityBarActive" :cityGroupData="value"></city-map-list>
      </template>
    </div>

  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { computed } from "@vue/runtime-core";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";
import useCityStore from '../../store/modules/cityStore'
import cityMapList from './cpns/city-map-list.vue'

const value = ref('');
const router = useRouter();
const onCancel = () => {
  router.back()
}

// 获取city数据
const cityStore = useCityStore();
cityStore.getcityall();
const { cityAll } = storeToRefs(cityStore);

// 分tab显示city数据
const cityBarActive = ref();
const cityPartData = computed(() => cityAll.value[cityBarActive.value])
</script>
 
<style lang="less" scoped>
.header{
    position: relative;
    z-index: 88;
  }
.contaion {
  height: calc(100vh - 98px);
  overflow-y: auto;

}
</style>